<template>
    <div>
        <Modal v-model="ruleModal" :width="1100" :styles="{top: '90'}" :footer-hide="true" @on-cancel="cancel" style="margin-left: 300px">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"></Icon>
                <span>置顶规则配置</span>
            </p>
            <Row>
                <Form inline :label-width="120" class="formRegister" style="margin-left:-50px">
                    <Form-item label="规则名称">
                        <Input type="text" v-model="myInput" @input="transmit" v-bind:disabled="diasabledInput" clearable placeholder="请输入规则名称" style="width: 150px"/>
                    </Form-item>
                </Form>
            </Row>
            <Row>
                <Card style="margin-top:-15px">
                    <rule-tree v-if="dataLoad" @saved="ruleSaved"
                               :rule-data="ruleData"
                               :ruleAtoms="ruleAtoms" :rule-id="ruleId" :ruleName="ruleName" :ruleGroup="ruleGroup" :businessScenario="businessScenario"/>
                </Card>
            </Row>
        </Modal>
    </div>
</template>
<script>
    let seed = 0;
    const now = Date.now();
    function getUuid () {
        return now+(seed++)+"";
    }
    import ruiRules from '_c/rui-auto/rui-rules/index'
    import {loadRuleDataById} from '_p/basic/api/rule/rule'
    import {queryAtomsByBizType} from '_p/basic/api/rule/ruleAtom'
    export default {
        name:'demo-rule-tree',
        components: {
            ruleTree:ruiRules
        },
        props: {

        },
        data() {
            return {
                myInput:"",
                ruleModal:false,
                diasabledInput:false,
                ruleAtoms:[],
                ruleName:'',
                ruleGroup:'top',
                businessScenario:'',
                ruleData:[],
                ruleId:'',
                dataLoad:false,
                bizType: 'top',
            }
        },
        methods: {
            ruleSaved(ruleId){
                this.ruleModal = false;
                this.cancel();
                this.$parent.refreshTopRules();
            },
            ruleMsg: function (msg) {
                this.ruleId = msg.ruleId;
                this.ruleModal = true;
                this.myInput = msg.ruleName;
                this.diasabledInput = true;
                this.businessScenario = msg.ruleNo;
                if(msg.ruleId===''){
                    this.myInput = '';
                    this.diasabledInput = false;
                    const id = getUuid();
                    this.businessScenario = id;
                }else{
                    this.ruleName = msg.ruleName;
                }
                this.queryRuleDataById();
                this.queryRuleAtomInfo();
            },
            queryRuleDataById(){
                loadRuleDataById((this.ruleId&&this.ruleId!='')?this.ruleId:undefined).then(res=>{
                    if(res.code='0000'){
                        if(res.data.length>0) {
                            this.ruleData.push(...res.data);
                        }
                        this.dataLoad = true;
                    }
                });
            },
            queryRuleAtomInfo(){
                queryAtomsByBizType(this.bizType,"case").then(res=>{
                    if(res.code=="0000"){
                        this.ruleAtoms = res.data;
                    }
                })
            },
            cancel () {
                this.ruleId = '';
                this.ruleData = [];
                this.dataLoad = false;
                this.ruleName = '';
                this.myInput = '';
                this.businessScenario = '';
            },
            transmit(e){
                this.ruleName = e;
                this.ruleModal = true;
            }
        }
    }
</script>
<style scoped>
    .formRegister >>> .ivu-form-item-label{;
        color: red;
        font-size: 14px
    }
</style>

